<script>
export default {
  name: "people_new",
  methods: {
    open_on() {
      this.$api.userAccount({}, res => {
        if (res.status) {
          if (res.data.isCertified) {
            // 已实名
            this.$api.userInfo({}, res => {
              if (res.status && res.data.walletStatus) {
                if(res.data.walletStatus.hfStatus == 1 || res.data.walletStatus.sdStatus == 1) {
                  // 已开户
                  uni.switchTab({
                    url: '/pages/index/index'
                  })
                } else {
                  this.step = 2;
                  this.$refs.popup1.open()
                }
              }
            })
          } else {
            // 未实名
            this.step = 1;
            this.$refs.popup1.open()
          }
        } else {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      });
      if (this.step === 1 || this.step === 2) {
        this.$refs.popup1.open()
      }
    },
    goOpen() {
      uni.navigateTo({
        url: '/pages/user/wallet/wallet-list',
      })
    },
    goTrue() {
      uni.navigateTo({
        url: '/pages/user/apply/apply',
      })
    },
    closePop() {
      this.$refs.popup1.close()
      this.$refs.popup2.open()
    },
    closeAll() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    goOn() {
      this.$refs.popup2.close()
      this.$refs.popup1.open()
    }
  },
  data() {
    return {
      step: null, // 1为未实名 2为未开户，3为助力成功
    }
  },
  onShow() {
    this.open_on()
  },
  onReady() {
    this.open_on()
  },
}
</script>

<template>
<view>
  <uni-popup ref="popup1" type="center" :mask-click="false">
    <view class="container">
      <view class="invite_title" v-if="step === 1">欢迎进入金世界！</view>
      <view class="invite_title" style="text-align: center" v-if="step === 2">最后一步</view>
      <view class="invite_subtitle" v-if="step === 1">完成以下操作，即可获得初始价值为100元的卢克哟～</view>
      <view class="invite_subtitle" v-if="step === 2">请选择杉德钱包或汇付天下完成钱包开户，即可获得初始价值为100的卢克！</view>
      <view class="invite_step" v-if="step === 1 || step === 2">
        <view class="invite_item_container">
          <view class="invite_item">
            <image src="@/static/finish/green_name.png"></image>
            <text>实名认证</text>
          </view>
          <view class="invite_item">
            <image src="@/static/finish/green_bag.png"></image>
            <text>钱包开户</text>
          </view>
          <view class="invite_item">
            <image src="@/static/finish/green_get.png"></image>
            <text>领取卢克</text>
          </view>
        </view>
        <view class="invite_special">
          <image src="@/static/finish/green_step.png"></image>
        </view>
      </view>
      <view class="invite_button_container">
        <view class="close" @click="closePop">取消</view>
        <view class="go_next" v-if="step === 1" @click="goTrue">去实名</view>
        <view class="go_next" v-if="step === 2" @click="goOpen">去开户</view>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="popup2" type="center" :mask-click="false">
    <view class="container">
      <view class="invite_title" style="text-align: center;margin-top: 60rpx;">提示</view>
      <view class="invite_subtitle" style="margin-top: 60rpx;">此操作将无法获得初始价值为100元的卢克，您确定要取消吗？</view>
      <view class="invite_button_container" style="margin-top: 150rpx;">
        <view class="close" @click="closeAll">取消</view>
        <view class="go_next" @click="goOn">继续领取</view>
      </view>
    </view>
  </uni-popup>
</view>
</template>

<style scoped lang="scss">
.invite_button_container {
 display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  .close {
    border-radius: 50%;
    width: 292rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-family: PingFang SC;
    font-size: 36rpx;
    color: #000000;
    text-align: center;
    opacity: 0.9;
    background: #ffffff;
    border-radius: 60rpx;
    box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(234, 234, 234, 1);
    margin-right: 50rpx;
  }
  .go_next {
    border-radius: 60rpx;
    background: linear-gradient(rgba(155, 198, 81, 1), rgba(72, 190, 132, 1));
    line-height: 100rpx;
    text-align: center;
    width: 292rpx;
    height: 100rpx;
    font-family: PingFang SC;
    font-size: 36rpx;
    color: #FFFFFF;
    opacity: 0.9;
  }
}
.container {
  padding: 90rpx 50rpx;
  background: url("@/static/finish/green_bg.png") no-repeat;
  background-size: contain;
  width: 700rpx;
  height: 650rpx;
  .success_img {
    margin: 0 auto;
    width: 240rpx;
    height: 244rpx;
    image {
      width: 240rpx;
      height: 244rpx;
    }
  }
  .invite_title {
    height: 37rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 39rpx;
    color: #000000;
    opacity: 0.9;
    margin-bottom: 27rpx;
  }
  .invite_subtitle {
    height: 29rpx;
    font-family: PingFang SC;
    font-size: 28rpx;
    color: #000000;
    opacity: 0.8;
    margin-bottom: 70rpx;
  }
}
.invite_step {
  position: relative;
  background: #ffffff;
  height: 195rpx;
  margin: 0 auto;
  .invite_item_container {
    padding: 30rpx 0 50rpx 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .invite_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 120rpx;
      image {
        width: 85rpx;
        height: 64rpx;
      }
      text {
        margin-top: 30rpx;
      }
    }
  }
  .invite_special {
    position: absolute;
    bottom: 55rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 269rpx;
    height: 20rpx;
    image {
      width: 269rpx;
      height: 20rpx;
    }
  }
}
</style>
